<template>
  <div class="tpl23-goods"
     :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <ul>
      <li class="goods-item" v-for="(goods,index) in tplItemData.goodslist" :key="index">
        <a class="goodsimg" @click="openLink(goods.link)">
          <img
            :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
            alt
          />
        </a>
        <div class="goods-info">
          <a  @click="openLink(goods.link)" class="title" v-if="tplItemData.showName == 1 ||tplItemData.showName"> {{goods.title}} </a>
          <p :class="['pic_box',tplItemData.showName == 1?'pic_box1':'']" >
            <span class="goods-pirce" v-html="scaleGoodsPriceFn(goods.price)"></span>
            <a @click="openLink(goods.link)" class="addcart">{{tplItemData.goodstxt}}&nbsp;&gt;</a>
          </p>
        </div>
        
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { scaleGoodsPrice } from '@/utils/index'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {

    }
  },
  created() {
    // // console.log(this.tplItemData, 'aaaaa')
  },
  computed: {
  },
  methods: {
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    }
  }
})
</script>

<style lang="scss" >
@import "src/styles/mixin";
.tpl23-goods{
  a{
    display: block;
  }  
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .goods-item{
      width: calc(50% - 10px);
      margin-bottom: 20px;
      // 图片样式
      .goodsimg{
        position: relative;
        padding-top: 100%;
        overflow: hidden;
        img{
          position: absolute;
          top: 0;
          width: 100%;
        } 
      }
      // 商品信息
      .goods-info{
        position: relative;
        .title{
          @include lineClamp(28px,56px,1);
          &.multiLine{
            @include lineClamp(28px,56px,2);
          }
        }
        .pic_box{
          overflow: hidden;
          padding: 30px 0;
          display: flex;
          justify-content: space-between;
          &.pic_box1{
            padding-top: 10px;
          }
          .addcart{
            height: 34px;
            padding: 0 20px;
            line-height: 34px;
            background-color: #a88c5c;
            color: #fff;
          }
          .goods-pirce{
            .price-scale{
              color: #333;
            }
          }
        }
      }
    }
  }
}

</style>